<!--
 * @Author: zhangfan
 * @Date: 2024-06-24 11:28:27
 * @LastEditors: ***
 * @LastEditTime: 2024-06-24 15:51:58
 * @Description: 子组件1
 * @FilePath: /demo/src/components/child-one.vue
-->
<template>
  <div class="view-contain-one">
    <p>子组件1</p>
    <button @click="changeData">改变son2数据</button>
    <button @click="getParentData">获取父组件数据</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      message: 123
    }
  },
  methods: {
    // 点击按钮后需要改变Child2组件的数据。
    // 我们可以通过在Child1组件的methods中使用$root属性来访问和操作Child2组件的数据：
    changeData () {
      this.$root.$emit('changeChild2Data', 456)
    },
    test () {
      const val = 'i am child-one component'
      return val
    },
    // 获取父组件数据
    getParentData () {
      const val = this.$parent.text
      // 通过$parent获取父组件的数据
      console.log('val==', val)
      // 通过$parent获取父组件的数据
      const val1 = this.$parent.test()
      console.log('val1==', val1)
    }
  }
}
</script>
<style scoped>
.view-contain-one {
  height: 300px;
  width: 500px;
  border: 1px solid #ccc;
}
</style>
